import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,Table,Button,Row,Col,Popconfirm} from 'antd';
import { baseUrl } from '../../config/system';
const FormItem = Form.Item;
const Option = Select.Option;

class ViewModal extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { children, dispatch,detailList,detailCurrentSize,detailCurrent,detailTotal,currentDetailItem } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 12 },
    };

      //删除报表文件
    const deleteDetailHandler = (id,filePath) => {
        dispatch({
            type: 'reportPlan/removeFile',
            payload:{id:id,filePath:filePath,'templetId':currentDetailItem.templetId,...{'pageNum':detailCurrent, 'pageSize':detailCurrentSize,} },
        })
    }

    //下载报表文件
    const onUploadFile = (filePath,fileName) => {
      let values = {filePath:filePath,fileName:fileName};
      let param = JSON.stringify(values);
      param = encodeURIComponent(param);
      window.open(baseUrl+"/report/downLoadFile?param="+param);
    }

    const paginationDetail = {
        current:detailCurrent,
        pageSize:detailCurrentSize,
        total: detailTotal,
        showSizeChanger: true,
        showTotal: (total => '共' + detailTotal + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'reportPlan/searchDetailList',
                payload: {...{'pageNum':current, 'pageSize':size,'templetId':currentDetailItem.templetId} },
            });
        },
        onChange(current) {
            dispatch({
                type: 'reportPlan/searchDetailList',
                payload: { ...{'pageNum':current, 'pageSize':detailCurrentSize,'templetId':currentDetailItem.templetId} },
            });
        },
    };

    const columns = [{
        title: '模板计划',
        dataIndex: 'fileName',
        key: 'fileName',
        width: 150,
      },{
        title: '文件',
        dataIndex: 'filePath',
        key: 'filePath',
        width: 100,
        render: (text, record) => (
            <span>
             <a onClick={onUploadFile.bind(null, record.filePath,record.fileName)}>下载文件</a>
            </span>
        ),
      },{
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 120,
      },{
        title: '操作',
        key: 'operation',
        width: 80,
        render: (text, record) => (
            <span>
               <Popconfirm title="确认删除？" onConfirm={deleteDetailHandler.bind(null, record.id_,record.filePath)}>
                  <a>删除</a>
               </Popconfirm>
            </span>
        ),
    }
    ];
    return (
      <span>
        <Modal
            maskClosable= {this.props.maskClosable}
            title={this.props.title}
            style={{ top: 50}}
            width={600}
            visible={this.props.visible}
            footer={[
              <Button  key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
            ]}
            onCancel={this.props.onCancel}
            key={this.props.newKey}
        >
         <div style={{width:'auto',height:document.body.clientHeight - 230,position:'relative',backgroundColor:'#fff'}}>
            <div style={{minHeight:'100%'}}>
                <div style={{width:'100%',height:'100%',paddingLeft:'20px'}}>
                      <Table columns={columns}
                          loading={this.props.confirmLoading}
                          rowKey={record => record.id_}
                          dataSource={detailList}
                          pagination={paginationDetail}
                          scroll={{ y: document.body.clientHeight - 360 }}
                    />
                </div>
            </div>
        </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(ViewModal)
